<template>
	<view class="demo-section">
		<demo-block title="基础用法">
			<view class="x-grid x-hairline--top">
				<view class="x-grid-item" style="flex-basis: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
			</view>
		</demo-block>
		<demo-block title="自定义列数">
			<view class="x-grid x-hairline--top">
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
			</view>
		</demo-block>
		<demo-block title="自定义内容">
			<view class="x-grid">
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center">
						<view class="x-image" style="width:100%;"><image mode="widthFix" src="https://img.yzcdn.cn/vant/apple-1.jpg" class="x-image__img" style="object-fit: contain;" /></view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center">
						<view class="x-image" style="width:100%;"><image mode="widthFix" src="https://img.yzcdn.cn/vant/apple-2.jpg" class="x-image__img" style="object-fit: contain;" /></view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 33.3333%;">
					<view class="x-grid-item__content x-grid-item__content--center">
						<view class="x-image" style="width:100%;"><image mode="widthFix" src="https://img.yzcdn.cn/vant/apple-3.jpg" class="x-image__img" style="object-fit: contain;" /></view>
					</view>
				</view>
			</view>
		</demo-block>
		<demo-block title="正方形格子">
			<view class="x-grid x-hairline--top">
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item x-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--square x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
			</view>
		</demo-block>
		<demo-block title="格子间距">
			<view class="x-grid" style="padding-left: 10px;">
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
					<view class="x-grid-item__content x-grid-item__content--center x-grid-item__content--surround x-hairline">
						<text class="x-icon x-icon-photo-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
			</view>
		</demo-block>
		<demo-block title="页面导航">
			<view class="x-grid x-hairline--top">
				<view class="x-grid-item" style="flex-basis: 50%;">
					<view role="button" tabindex="0" class="x-grid-item__content x-grid-item__content--center x-grid-item__content--clickable x-hairline">
						<text class="x-icon x-icon-home-o x-grid-item__icon"></text>
						<view class="x-grid-item__text">路由跳转</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 50%;">
					<view role="button" tabindex="0" class="x-grid-item__content x-grid-item__content--center x-grid-item__content--clickable x-hairline">
						<text class="x-icon x-icon-search x-grid-item__icon"></text>
						<view class="x-grid-item__text">URL 跳转</view>
					</view>
				</view>
			</view>
		</demo-block>
		<demo-block title="提示信息">
			<view class="x-grid x-hairline--top">
				<view class="x-grid-item" style="flex-basis: 50%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<view class="x-icon x-icon-home-o x-grid-item__icon"><text class="x-info x-info--dot"></text></view>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
				<view class="x-grid-item" style="flex-basis: 50%;">
					<view class="x-grid-item__content x-grid-item__content--center x-hairline">
						<view class="x-icon x-icon-search x-grid-item__icon"><text class="x-info">99+</text></view>
						<view class="x-grid-item__text">文字</view>
					</view>
				</view>
			</view>
		</demo-block>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped></style>
